<script setup lang="ts" name="SubMenu">

import {useRouter} from "vue-router";

// defineOptions({
//     name: 'SubMenu'
// })

interface SubMenuProps {
    menuList?: Menu.MenuOptions[]
}
const { menuList = [] as Menu.MenuOptions[]} = defineProps<SubMenuProps>()


const router = useRouter();
const handleClickMenu = (subItem: Menu.MenuOptions)=>{
    // 跳转外部练练
    if (subItem.meta.isLink) return window.open(subItem.meta.isLink, '__blank')

    router.push(subItem.path)
}

</script>

<template>
  <div style="color: white">
  </div>
  <template v-for="subItem in menuList" :key ="subItem.path">
      <!--      有子菜单-->
      <el-sub-menu
              v-if="subItem.children && subItem.children.length > 1"
              :index="subItem.path">
          {{subItem.children.length}}
          <template #title>
              <el-icon>
                  <component :is="subItem.meta.icon"></component>
              </el-icon>
              <span>{{ subItem.meta.title}}</span>
          </template>
          <!-- 有children递归本次组件 -->
          <sub-menu :menuList="subItem.children"></sub-menu>
      </el-sub-menu>
      <!--  只有一个子菜单  -->
      <el-menu-item
              v-else-if="subItem.children && subItem.children.length == 1"
              :index="subItem.children[0].path"
              @click="handleClickMenu(subItem.children[0])"
      >
          <el-icon>
              <component :is="subItem.children[0].meta.icon"></component>
          </el-icon>
          <template #title>
              <span>{{ subItem.children[0].meta.title }}</span>
          </template>
      </el-menu-item>
      <!--  没有子菜单 -->
      <el-menu-item
              v-else
              :index="subItem.path"
              @click="handleClickMenu(subItem)"
      >
          <el-icon>
              <component :is="subItem.meta.icon"></component>
          </el-icon>
          <template #title>
              <span>{{ subItem.meta.title }}</span>
          </template>
      </el-menu-item>

  </template>

</template>

<style scoped lang="scss">

</style>